<template>
  <div class="chat-container">
    <div class="chat-messages" ref="messagesContainer">
      <div v-for="(msg, index) in messages" :key="index" 
           :class="['message', msg.role]">
        <el-avatar 
          v-if="msg.role === 'assistant'" 
          :icon="ChatRound"
          :size="40"
        />
        <el-avatar 
          v-else 
          :src="userAvatar"
          :size="40"
        />
        <div class="message-content">
          <div class="message-text" v-html="msg.content.replace(/\n/g, '<br>')"></div>
        </div>
      </div>
    </div>

    <div class="quick-responses">
      <el-button 
        v-for="(text, index) in ['任务详情', '联系方式', '预算']" 
        :key="index"
        class="custom-button"
        size="small"
        @click="handleMessage(text)"
      >
        {{ text }}
      </el-button>
    </div>
    
    <div class="chat-input">
      <el-input
        v-model="inputMessage"
        placeholder="输入消息..."
        :disabled="loading"
        @keyup.enter="handleMessage"
      >
        <template #append>
          <el-button 
            type="primary" 
            :loading="loading"
            @click="handleMessage"
          >
            发送
          </el-button>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { ChatRound, User } from '@element-plus/icons-vue'

const props = defineProps({
  taskInfo: {
    type: Object,
    default: null
  }
})

const messages = ref([])
const inputMessage = ref('')
const loading = ref(false)
const messagesContainer = ref(null)

// 移除头像 URL，使用默认头像
const aiAvatar = ''
const userAvatar = 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'

// 预设的回答
const defaultResponses = {
  '你好': '你好！我是AI助手，很高兴为您服务。请问有什么可以帮您的吗？',
  '任务详情': props.taskInfo ? 
    `这个任务的详细信息如下：\n标题：${props.taskInfo.title}\n类型：${props.taskInfo.taskType}\n预算：${props.taskInfo.budget}\n详情：${props.taskInfo.content}` : 
    '抱歉，没有找到任务详情。',
  '联系方式': props.taskInfo ? 
    `联系人：${props.taskInfo.contactPerson}\n联系方式：******` : 
    '抱歉，没有找到联系方式。',
  '预算': props.taskInfo ? 
    `该任务的预算是：${props.taskInfo.budget}` : 
    '抱歉，没有找到预算信息。',
  'analyze': props.taskInfo ? 
    `基于任务信息，我的分析如下：

    1. 任务难度评估：
    - 技术复杂度：中等
    - 实现难度：需要相关领域经验
    
    2. 所需技能和经验：
    - ${props.taskInfo.taskType} 相关技术栈
    - 项目管理经验
    - 团队协作能力
    
    3. 预计完成时间：
    - 开发周期：约 2-3 周
    - 测试周期：约 1 周
    
    4. 预算合理性分析：
    - 当前预算：${props.taskInfo.budget}
    - 市场行情：基本符合市场价位
    
    5. 潜在风险和注意事项：
    - 需求可能存在变更
    - 技术实现有一定挑战
    - 建议做好进度把控` : 
    '抱歉，无法获取任务信息进行分析。',
  'suggest': props.taskInfo ?
    `根据任务情况，我的建议如下：

    1. 实施方案建议：
    - 采用敏捷开发方法
    - 分阶段交付，先实现核心功能
    
    2. 技术选型建议：
    - 选择成熟稳定的技术栈
    - 考虑后期扩展性
    
    3. 开发流程建议：
    - 制定详细的开发计划
    - 做好版本控制
    - 定期代码审查
    
    4. 质量保证建议：
    - 完善的测试用例
    - 自动化测试
    - 性能优化
    
    5. 沟通协作建议：
    - 每日站会同步进度
    - 及时反馈问题
    - 保持良好沟通` :
    '抱歉，无法获取任务信息提供建议。',
  'estimate': props.taskInfo ?
    `以下是我的评估结果：

    1. 工作量评估：
    - 开发工时：约 80-100 小时
    - 测试工时：约 20-30 小时
    
    2. 成本收益分析：
    - 预期投入：${props.taskInfo.budget}
    - 市场价值：具有良好的投资回报比
    
    3. 时间周期估算：
    - 总体周期：3-4 周
    - 关键路径：需求确认->开发->测试->上线
    
    4. 资源需求评估：
    - 开发人员：2-3 人
    - 测试人员：1 人
    
    5. 可行性分析：
    - 技术可行性：高
    - 时间可行性：合理
    - 成本可行性：可接受` :
    '抱歉，无法获取任务信息进行评估。',
  'default': '抱歉，我不太理解您的问题。您可以试试问我：\n- 任务详情\n- 联系方式\n- 预算'
}

watch(() => props.taskInfo, (newTask) => {
  if (newTask) {
    messages.value = [{
      role: 'assistant',
      content: `您好！我是关于任务"${newTask.title}"的客服助手。您可以问我：\n- 任务详情\n- 联系方式\n- 预算\n或者其他任何问题。`
    }]
  }
}, { immediate: true })

const scrollToBottom = async () => {
  await nextTick()
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

const handleMessage = async (text) => {
    const messageText = typeof text === 'string' ? text : inputMessage.value.trim();
    
    if (!messageText) return;
    
    // 不显示用户发送的 analyze、suggest、estimate 消息
    if (!['analyze', 'suggest', 'estimate'].includes(messageText)) {
        messages.value.push({
            role: 'user',
            content: messageText
        });
    }
    
    if (typeof text !== 'string') {
        inputMessage.value = '';
    }
    
    loading.value = true;
    
    try {
        let response = defaultResponses[messageText] || defaultResponses['default'];
        await new Promise(resolve => setTimeout(resolve, 500));
        
        messages.value.push({
            role: 'assistant',
            content: response
        });
        await scrollToBottom();
    } catch (error) {
        ElMessage.error('发送消息失败，请重试');
    } finally {
        loading.value = false;
    }
};

// 添加一个方法供外部调用
const sendMessage = async (message) => {
    await handleMessage(message);
};

// 暴露方法供父组件调用
defineExpose({
    sendMessage
});

onMounted(() => {
  scrollToBottom()
})
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  max-height: 600px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 12px;
}

.message.user {
  flex-direction: row-reverse;
}

.message-content {
  background: #f4f4f5;
  padding: 12px;
  border-radius: 8px;
  max-width: 70%;
}

.message.user .message-content {
  background: #ecf5ff;
}

.message-text {
  white-space: pre-wrap;
  line-height: 1.5;
}

.chat-input {
  padding: 20px;
  border-top: 1px solid #dcdfe6;
}

.quick-responses {
  display: flex;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid #dcdfe6;
  background-color: #fff;
}

.custom-button {
  color: #409EFF !important;
  background-color: #ecf5ff !important;
  border: none !important;
  transition: all 0.3s ease;
}

.custom-button:hover {
  color: #fff !important;
  background-color: #409EFF !important;
  transform: translateY(-1px);
}

.custom-button:active {
  transform: translateY(0);
}

.el-avatar {
  flex-shrink: 0;
  background-color: var(--el-color-primary) !important;
}

.message.user .el-avatar {
  background-color: var(--el-color-success) !important;
}

.message.assistant .el-avatar {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
</style> 